<template>
    <div class="block">
        <el-carousel trigger="click" height="200px" type="card" :autoplay="true">
            <el-carousel-item v-for="item in 3" :key="item">
                <div class="carousel-item-container" @click="gotoSubmit">
                    <!-- item-grid必须有，否则grid会出现定位问题 -->
                    <div class="item-grid">
                        <img src="../../static/submit.png" alt class="submit-icon" />
                        <h1 class="item-title">我要投稿</h1>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    name: "carouselComponet",
    props: [],
    data() {
        return {};
    },
    methods: {
        gotoSubmit() {
            this.$router.push({ path: "/add" });
        }
    }
};
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.carousel-item-container {
    height: 100%;
}
.item-grid {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-columns: 1fr 4fr 6fr;
    justify-items: center;
    align-items: center;
}
.submit-icon {
    height: 100%;
    grid-column-start: 2;
    grid-row-start: 2;
}
.item-title {
    grid-column-start: 3;
    grid-row-start: 2;
}
</style>